<template>
	<!-- 活动专区 -->
	<view class="Limitedtime">
		<image :src="activityData[0].img" mode="" class="top_img"></image>
		<view class="hongbao" v-for="(item, index) in couponData" :key="index">
			<view class="top">
				<p class="p1">{{ item.title }}</p>
				<p class="p2">满{{ item.cill }}可用</p>
				<p class="p3">
					¥
					<text>{{ item.money }}</text>
				</p>
			</view>
			<view class="bottom">
				<p class="p1">可领取时间:{{ item.start_time | setTime }}~{{ item.end_time | setTime }}</p>
				<p class="p2" v-if="item.is_get == 0" :style="{ color: newColor.color, borderColor: newColor.color }" @tap="lingqu(item)">领取</p>
				<p class="p2" v-else style="color: #999999;border-color:#999">已领取</p>
			</view>
		</view>
		<view class="list_s" v-for="(item, index) in activityData[0].activity_goods" :key="index">
			<image :src="item.img" @tap="jumpdata(item)"></image>
			<view class="goods_right">
				<p class="p1" @tap="jumpdata(item)">
					<image :src="item.tag_img" mode="" v-if="item.tag_type == 2"></image>
					<text class="hot" v-if="item.tag_type == 1" :style="{ backgroundColor: newColor.color }">{{ item.tag_content }}</text>
					<text class="name">{{ item.title }}</text>
				</p>
				<p class="p2">
					<text class="text1">累计{{ item.sales }}份</text>
					<text style="margin: 0 10upx;">|</text>
					<text class="text2" :style="{ color: newColor.color }">剩余{{ item.inventory }}份</text>
				</p>
				<p class="p3">
					<text class="text1" :style="{ color: newColor.color }">¥{{ item.activity_price || 0 }}</text>
					<text class="text2" v-if="item.disuse_price">¥{{ item.disuse_price }}</text>
				</p>
				<view style="overflow: hidden;" v-if="item.is_option == 0">
					<p class="goumai" :style="{ background: newColor.color }" @click="setCount(item)">
						立即购买
						<text v-if="item.count">{{ item.count }}</text>
					</p>
				</view>
				<!-- 如果商品存在商品规格 点击弹出规格弹窗 -->
				<view class="sku_btn" @tap="setSku(item)" v-else :style="{ background: newColor.color }">选择规格</view>
			</view>
		</view>
		<uni-popup ref="popup" type="center">
			<view class="sku_box">
				<p class="title">添加到购物车</p>
				<scroll-view scroll-y="true" class="sku_scroll">
					<!-- 第一层 -->
					<view class="lists" v-for="(item, n) in sku" :key="n">
						<p class="sku_name">{{ item.title }}</p>
						<view class="list_box">
							<p
								v-for="(item1, index) in item.goods_spec_item"
								:key="index"
								@click="setSkuList(item1.item_title, n, index)"
								:style="{ color: subIndex[n] == index ? newColor.color : '', borderColor: subIndex[n] == index ? newColor.color : '' }"
								v-bind:class="[item1.isShow ? '' : 'noneActive', subIndex[n] == index ? 'productActive' : '']"
							>
								{{ item1.item_title }}
							</p>
						</view>
					</view>
				</scroll-view>
				<view class="price_box">
					<p class="kucun">库存：{{ kucun }}</p>
					<view class="number">
						<view class="sub" @tap.stop="sub(row)"><view class="icon jian"></view></view>
						<view class="input" @tap.stop="discard"><input type="number" v-model="number" @input="sum" /></view>
						<view class="add" :style="{ background: number < kucun ? newColor.color : '#f2f2f2' }" @tap.stop="add(row)"><view class="icon jia"></view></view>
					</view>
					<p class="p1">
						<text class="text1">已选规格：</text>
						<text class="text2" v-if="item" v-for="(item, index) in selectArr" :key="index">{{ item }}</text>
					</p>
					<view class="bottom">
						<p class="left">￥{{ numprice || 0 }}</p>
						<p class="right" :class="[kucun == 0 ? 'noactive' : '']" @tap="addCartOption">加入购物车</p>
					</view>
				</view>
			</view>
			<image src="../../static/image/close.png" mode="" @tap="close" class="close"></image>
		</uni-popup>
		<ourLoading isFullScreen :active="active" text="loading..." />
	</view>
</template>

<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import { setTime } from '../../../static/utils/ahth.js';
export default {
	components: {
		uniPopup
	},
	data() {
		return {
			goodsData: [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }],
			active: true,
			pageIndex: 1,
			activityData: [],
			couponData: [],
			sku: [],
			subIndex: [],
			skuAllData: [],
			selectArr: [],
			shopItemInfo: {}, //存放要和选中的值进行匹配的数据
			ids: '',
			kucun: 0,
			price: 0,
			optionId: '',
			numprice: '',
			shows: false,
			number: 1
		};
	},
	filters: {
		setTime(value) {
			var day = new Date(Number(value) * 1000);
			console.log(day);
			var time = setTime('YYYY-mm-dd', day);
			console.log(time);
			return time;
		}
	},
	onShow() {
		this.getGoodList();
		this.getCouponList();
		setTimeout(() => {
			this.active = false;
		}, 600);
	},
	methods: {
		setCount(item) {
			var count = '';
			if (item.count && item.count !== '') {
				count = item.count + 1;
			} else {
				count = 1;
			}
			this.$set(item, 'count', count);
			console.log(item);
			this.addCart(item);
		},
		addCart(item) {
			//添加到购物车
			this.request('cart/addCart', {
				goods_id: item.goods_id
			}).then(res => {
				if (res.code == 200) {
					uni.showToast({
						title: '添加购物车成功',
						icon: 'none'
					});
				}
			});
		},
		getGoodList() {
			this.request('goods/getActivityList', {
				page: this.pageIndex,
				psize: 10
			}).then(res => {
				console.log(res);
				this.activityData = res.data.activity;
			});
		},
		getCouponList() {
			this.request('common/getCouponList', {
				show_address: 2
			}).then(res => {
				console.log(res);
				this.couponData = res.data;
			});
		},
		lingqu(item) {
			//领取优惠券
			this.request('user/receiveCoupon', {
				coupon_id: item.id
			}).then(res => {
				console.log(res);
				if (res.code == 200) {
					uni.showToast({
						title: '领取成功'
					});
					this.getCouponList();
				}
				if (res.code == 400) {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				}
			});
		},
		jumpdata(item) {
			console.log(item);
			this.$Router.push({
				path: '/pagesA/pages/goods/goodsDetails',
				query: {
					goodid: item.goods_id,
					type: 3
				}
			});
		},
		setSku(item) {
			//选择商品规格
			console.log(item);
			this.selectArr = [];
			this.shopItemInfo = {};
			this.subIndex = [];
			this.price = 0;
			this.kucun = 0;
			this.ids = item.goods_id;
			this.getSkuAll(item);
			this.getSkuList(item);
			setTimeout(() => {
				uni.hideTabBar();
			}, 200);
			this.$refs.popup.open();
		},
		sub(item) {
			//减少商品
			if (this.number == 1) {
				return;
			} else {
				this.number--;
				this.numprice = this.number * this.price;
			}
		},
		add(item) {
			//增加商品到购物车
			if (this.kucun == 0) {
				return;
			}
			if (this.number >= this.kucun) {
				return;
			}
			this.number++;
			this.numprice = this.number * this.price;
		},
		getSkuList(item) {
			//获取商品的规格
			this.request('goods/getGoodsSpecs', {
				goods_id: item.goods_id
			}).then(res => {
				console.log(res);
				this.sku = res.data;
				this.checkItem(-1);
			});
		},
		getSkuAll(item) {
			//获取商品的所有规格信息 方便匹配对比
			this.request('goods/getGoodsOption', {
				goods_id: item.goods_id,
				type: 3
			}).then(res => {
				console.log(res);
				this.skuAllData = res.data;
				console.log(this.skuAllData);
				this.initializeData();
			});
		},
		close() {
			setTimeout(() => {
				uni.showTabBar();
			}, 200);
			this.$refs.popup.close();
		},
		checkItem(clickIndex) {
			//对规格进行筛选 如果不符合要求的规格不能选择
			var option = this.sku;
			var x = '';
			for (let i = 0, len = option.length; i < len; i++) {
				//遍历规格列表
				if (i == clickIndex) {
					continue;
				}
				let len2 = option[i].goods_spec_item.length;
				for (let j = 0; j < len2; j++) {
					if (this.subIndex[i] != -1 && j == this.subIndex[i]) {
						continue;
					}
					let choosed_copy = [...this.selectArr];
					this.$set(choosed_copy, i, this.sku[i].goods_spec_item[j].item_title);
					let choosed_copy2 = choosed_copy.filter(item => item !== '' && typeof item !== 'undefined');
					let data = this.selectArr.join('_');
					this.skuAllData.forEach(e => {
						if (e.title == data) {
							this.kucun = Number(e.inventory);
							this.price = e.price;
							this.numprice = e.price;
							this.optionId = e.option_id;
							console.log(e);
						}
					});
					if (this.shopItemInfo.hasOwnProperty(choosed_copy2)) {
						this.$set(this.sku[i].goods_spec_item[j], 'isShow', true);
					} else {
						this.$set(this.sku[i].goods_spec_item[j], 'isShow', false);
					}
				}
			}
		},
		initializeData() {
			//计算有多小种可选路径
			console.log('执行了');
			let result = this.skuAllData.reduce(
				(arrs, items) => {
					return arrs.concat(
						items.title.split('_').reduce(
							(arr, item) => {
								return arr.concat(
									arr.map(item2 => {
										//利用对象属性的唯一性实现二维数组去重
										if (!this.shopItemInfo.hasOwnProperty([...item2, item])) {
											this.shopItemInfo[[...item2, item]] = items;
										}
										return [...item2, item];
									})
								);
							},
							[[]]
						)
					);
				},
				[[]]
			);
		},
		setSkuList(item, n, index) {
			//设置规格的选中
			console.log(item);
			this.shows = true;
			if (this.selectArr[n] != item) {
				this.$set(this.selectArr, n, item);
				this.$set(this.subIndex, n, index);
			} else {
				this.$set(this.selectArr, n, '');
				this.$set(this.subIndex, n, -1); //去掉选中颜色
			}
			this.checkItem(n);
		},
		addCartOption() {
			//有规格的添加购物车
			this.request('cart/addCart', {
				goods_id: this.ids,
				option_id: this.optionId,
				num: this.number
			}).then(res => {
				if (res.code == 200) {
					uni.showToast({
						title: '添加购物车成功!'
					});
					this.close();
				}
				if (res.code == 400) {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.top_img {
	width: 100%;
	height: 28vw;
	display: block;
}
.hongbao {
	margin-top: 20upx;
	margin-bottom: 10upx;
	overflow: hidden;
	.top {
		width: 630upx;
		height: 140upx;
		margin: 0 auto;
		box-sizing: border-box;
		padding: 25upx 30upx;
		background: url('');
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
		position: relative;
		.p1 {
			font-size: 32upx;
			font-family: Droid Sans Fallback;
			font-weight: 400;
			color: rgba(255, 255, 255, 1);
		}
		.p2 {
			font-size: 24upx;
			font-family: Droid Sans Fallback;
			font-weight: 400;
			color: rgba(255, 255, 255, 1);
			margin-top: 10upx;
		}
		.p3 {
			position: absolute;
			right: 20upx;
			bottom: 10upx;
			font-size: 28upx;
			font-family: Microsoft YaHei;
			font-weight: bold;
			color: rgba(255, 255, 255, 1);
			text {
				font-size: 80upx;
				font-family: Microsoft YaHei;
				font-weight: bold;
				color: rgba(255, 255, 255, 1);
			}
		}
	}
	.bottom {
		width: 671upx;
		height: 140upx;
		margin: 0 auto;
		box-sizing: border-box;
		padding: 20upx 30upx;
		margin-top: -20upx;
		background: url('');
		background-size: cover;
		background-repeat: no-repeat;
		.p1 {
			font-size: 24upx;
			font-family: Droid Sans Fallback;
			font-weight: 400;
			color: rgba(153, 153, 153, 1);
			margin-top: 40upx;
			float: left;
		}
		.p2 {
			width: 120upx;
			height: 45upx;
			border: 2upx solid rgba(255, 0, 0, 1);
			border-radius: 28upx;
			font-size: 24upx;
			font-family: Droid Sans Fallback;
			font-weight: 400;
			color: rgba(242, 58, 58, 1);
			line-height: 45upx;
			text-align: center;
			float: right;
			margin-top: 35upx;
		}
	}
}
.list_s {
	box-sizing: border-box;
	background-color: #ffffff;
	overflow: hidden;
	height: 290rpx;
	width: 100%;
	margin-top: 20upx;
	margin-bottom: 20upx;
	box-shadow: 0px 0px 21upx 0px rgba(255, 74, 44, 0.1);
	padding: 28upx;
	border-radius: 10upx;
	padding-left: 20upx;
	image {
		width: 200upx;
		height: 200upx;
		float: left;
		border-radius: 15upx;
		margin-right: 10upx;
	}
	.goods_right {
		position: relative;
	}
	.p1 {
		font-size: 32upx;
		color: #000000;
		overflow: hidden;
		height: 90upx;
		image {
			width: 40upx;
			height: 40upx;
			float: left;
			margin-right: 10upx;
		}
		.hot {
			font-size: 20upx;
			height: 40upx;
			line-height: 40upx;
			padding: 0upx 10upx;
			color: #ffffff;
			background-color: #f23a3a;
			border-radius: 8upx;
			margin-right: 10upx;
			float: left;
			box-sizing: border-box;
			margin-top: 5upx;
		}
		.name {
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}
	}
	.p2 {
		font-size: 24upx;
		height: 26upx;
		line-height: 26upx;
		margin-top: 10upx;
		color: #333333;
		margin-bottom: 10upx;
		.text1 {
			color: #646464;
		}
		.text2 {
			color: #f23a3a;
		}
	}
	.p3 {
		margin-top: 20upx;
		.text1 {
			font-size: 36upx;
			color: #f23a3a;
			margin-right: 10upx;
		}
		.text2 {
			font-size: 24upx;
			font-family: Droid Sans Fallback;
			font-weight: 400;
			text-decoration: line-through;
			color: rgba(100, 100, 100, 1);
		}
	}
	.step {
		overflow: hidden;
		position: absolute;
		right: -10upx;
		bottom: -20upx;
		text {
			font-size: 32upx;
			color: #ffffff;
			background-color: #ff0000;
			display: block;
			width: 40upx;
			height: 40upx;
			border-radius: 50%;
			text-align: center;
			line-height: 40upx;
		}
		/deep/.uni-numbox {
			height: 45upx;
			line-height: 40upx;
			width: auto;
			.uni-numbox__minus,
			.uni-numbox__value,
			.uni-numbox__plus {
				height: 40upx;
				line-height: 30upx;
				border: none;
				background-color: #ff0000;
				border-radius: 50%;
				width: 40upx;
				text {
					color: #ffffff;
				}
			}
			.uni-numbox__minus {
				background-color: #ddd !important;
				text {
					background-color: #ddd !important;
				}
			}
			.uni-numbox__value {
				width: 50upx;
				background-color: #fff;
				color: #333;
			}
		}
	}
	.goumai {
		height: 45upx;
		font-size: 22upx;
		color: #FFFFFF;
		line-height: 45upx;
		padding: 0 15upx;
		font-weight: bold;
		border-radius: 15upx;
		text-align: center;
		position: absolute;
		right: 0upx;
		bottom: -55upx;
		padding: 0 15upx;
		> text {
			display: inline-block;
			width: 40upx;
			height: 40upx;
			background-color: #fff;
			border-radius: 50%;
			text-align: center;
			line-height: 40upx;
			font-size: 24upx;
			color: #f23a3a;
			margin-left: 10upx;
		}
	}
}
.goods_right {
	position: relative;
	// overflow: hidden;
	.sku_btn {
		height: 45upx;
		font-size: 22upx;
		color: #FFFFFF;
		background-color: pink;
		line-height: 45upx;
		position: absolute;
		right: 0;
		bottom: -55upx;
		padding: 0 15upx;
		font-weight: bold;
		border-radius: 15upx;
		transition: all 0.3;
		&:active {
			opacity: 0.8;
		}
	}
}
.sku_box {
	width: 90vw;
	min-height: 60vh;
	overflow: hidden;
	background-color: #fff;
	border-radius: 20upx;
	box-sizing: border-box;
	padding: 30upx;
	margin-top: 10vh;
	.title {
		font-size: 32upx;
		font-weight: bold;
		color: #333333;
		height: 60upx;
	}
	.sku_scroll {
		height: 50vh;
		overflow: hidden;
		.lists {
			overflow: hidden;
			margin-bottom: 20upx;
			.sku_name {
				color: #999999;
				font-size: 28upx;
			}
			.list_box {
				overflow: hidden;
				p {
					float: left;
					height: 60upx;
					line-height: 60upx;
					padding: 0 30upx;
					border: 1upx solid #eeeeee;
					font-size: 24upx;
					border-radius: 15upx;
					margin-right: 20upx;
					margin-top: 20upx;
					transition: all 0.3s;
				}
			}
		}
	}
}
.close {
	height: 80upx;
	width: 80upx;
	border-radius: 50%;
	display: block;
	margin: 0 auto;
	margin-top: 30upx;
}
.price_box {
	// height: 10vh;
	.number {
		display: flex;
		float: right;
		overflow: hidden;
		.input {
			width: 50upx;
			height: 50upx;
			margin: 0 10upx;
			// background-color: #f3f3f3;
			input {
				width: 50upx;
				height: 50upx;
				display: flex;
				justify-content: center;
				align-items: center;
				text-align: center;
				font-size: 26upx;
			}
		}
		.sub,
		.add {
			width: 40upx;
			height: 40upx;
			background-color: #f2f2f2;
			border-radius: 50%;
			.icon {
				font-size: 22upx;
				width: 40upx;
				height: 40upx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #ffffff;
			}
		}
		.add {
			background-color: #ff0000;
		}
		.sub {
			.icon {
				color: #b3b3b3;
			}
		}
	}
	.p1 {
		height: 40upx;
		line-height: 40upx;
		font-size: 28upx;
		.text1 {
			color: #999999;
			font-size: 24upx;
		}
		.text2 {
			color: #333333;
			margin-right: 10upx;
			font-size: 24upx;
		}
	}
	.bottom {
		height: 80upx;
		margin-top: 30upx;
		.left {
			font-size: 40upx;
			color: #f9493d;
			float: left;
			margin-top: 20upx;
		}
		.right {
			float: right;
			padding: 10upx 20upx;
			background-color: #ffd25f;
			color: #333;
			margin-top: 20upx;
			border-radius: 15upx;
		}
		.noactive {
			float: right;
			padding: 10upx 20upx;
			background-color: #ccc;
			opacity: 0.4;
			color: #333;
			pointer-events: none;
			margin-top: 20upx;
			border-radius: 15upx;
		}
	}
}
.noneActive {
	//规格禁用
	background-color: #ccc;
	opacity: 0.4;
	color: #000;
	pointer-events: none;
}
.productActive {
	border: 1upx solid #1a1a29;
}
.kucun {
	color: #999999;
	font-size: 24upx;
	margin-bottom: 5upx;
}
.nodatas {
	image {
		width: 160upx;
		height: 160upx;
		display: block;
		margin: 0 auto;
		margin-top: 60upx;
	}
	p {
		text-align: center;
		color: #999999;
		font-size: 24upx;
		margin: 10upx;
	}
}
</style>
